<template>
	<view class="page">
    <view class="page-navbar" :style="'background-image: url('+indexBg+');'">
      <u-navbar :fixed="false" title="权限管理" placeholder bgColor="transparent"></u-navbar>
    </view>
    <view class="list" v-if="platformRoleList.length">
      <view class="list-header">
        <view class="header-item">角色名称</view>
        <view class="header-item">关联人数</view>
        <view class="header-item">角色状态</view>
        <view class="header-item">操作</view>
      </view>
      <view class="list-item" v-for="item in platformRoleList" :key="item.id">
        <view class="ld-item">{{ item.roleName }}</view>
        <view class="ld-item" style="color: #1890ff;" @click="jumpTo('/other/enterpriseInfo/platformRoleList', {id: item.id})">{{ item.userCount }}</view>
        <view class="ld-item">{{ statusInfo[item.status] }}</view>
        <view class="ld-item" @click="handleDelete(item.id)">
          <u-icon name="close" color="rgba(0,0,0,0.5)" size="24rpx"></u-icon>
        </view>
      </view>
    </view>
    <view v-if="platformRoleList.length == 0" class="a-empty"><a-empty></a-empty></view>
    <view class="footer-primary-btn" @click="jumpTo('/other/enterpriseInfo/platformRoleEdit')">新增权限</view>
	</view>
</template>

<script>
import { listPlatformRole, delPlatformRole } from '@/api/index'

export default {
  data() {
    return {
      indexBg: 'https://gowork365.com/prod-api/profile/mini/index/indexBg1.png',
      total: 0,
      page: {
        pageNum: 1,
        pageSize: 50,
      },
      platformRoleList: [],
      statusInfo: {
        '0': '启用',
        '1': '禁用',
      },
    }
  },
  onShow() {
    this.search()
  },
  methods: {
    getList() {
      uni.showLoading({ mask: true })
      listPlatformRole({...this.page}).then(response => {
        uni.hideLoading()
        this.platformRoleList = [...this.platformRoleList, ...response.rows];
        this.total = response.total;
      });
    },
    search() {
      this.page.pageNum = 1
      this.platformRoleList = []
      this.getList()
    },
    handleDelete(id) {
      const that = this
      uni.showModal({
        title: '提示',
        content: '删除后不可恢复，是否确认删除？',
        success: async function (res) {
          if (res.confirm) {
            await delPlatformRole(id)
            uni.showToast({
              icon: 'none',
              title: '删除成功',
            })
            that.search();
          }
        }
      });
    },
  },
  onReachBottom() {
    if(this.page.pageNum * this.page.pageSize < this.total) {
      this.page.pageNum++
      this.getList()
    }
  },
}
</script>

<style lang="scss" scoped>
.page{
	width: 750rpx;
	min-height: 100vh;
  background: #F4F7F6;
  position: relative;
  background-repeat: no-repeat;
  background-size: 750rpx 348rpx;
  padding-bottom: 180rpx;
  .page-navbar {
    background-repeat: no-repeat;
    background-size: 750rpx 690rpx;
    margin-bottom: 32rpx;
  }
  .list {
    width: 686rpx;
    margin: 0 auto;
    .list-header {
      display: flex;
      gap: 4rpx;
      margin-bottom: 16rpx;
      .header-item {
        flex: 1;
        height: 64rpx;
        line-height: 64rpx;
        background: #E9F8F6;
        border-radius: 8rpx;
        text-align: center;
        font-family: PingFangSC, PingFang SC;
        font-size: 24rpx;
        color: rgba(0,0,0,0.85);
      }
    }
    .list-item {
      display: flex;
      gap: 4rpx;
      padding: 32rpx 0;
      border-bottom: 2rpx solid #EDF3F1;
      .ld-item {
        flex: 1;
        font-size: 24rpx;
        color: rgba(0,0,0,0.85);
        text-align: center;
        display: flex;
        justify-content: center;
      }
    }
  }
}
</style>
